<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="/lib/layui-v2.6.3/css/layui.css"/>

	</head>
	<body>
		<button type="button" class="layui-btn layui-btn-primary layui-btn-sm open-all">全部展开</button>
		<button type="button" class="layui-btn layui-btn-primary layui-btn-sm close-all">全部关闭</button>
		
		<table class="layui-table layui-form" id="tree-table" lay-size="sm"></table>
		
		<script type="text/javascript" src="/lib/layui-v2.6.3/layui.js"></script>
		<script type="text/javascript">
			layui.config({
				base: '/js/'
			})
			layui.use(['treeTable','layer','code','form'],function(){
				var $ = layui.$,
					form = layui.form,
					layer = layui.layer,
					treeTable = layui.treeTable;
				var	re = treeTable.render({
					elem: '#tree-table',
					url:'/back/menu/listData',
					top_value: null,
					primary_key: 'code',
					parent_key: 'parentCode',
					icon_key: 'name',
					end: function(e){
						form.render();
					},
					cols: [
						{
							key: 'name',
							title: '菜单名称',
							width: '200px'
						},
						{
							key: 'code',
							title: '菜单编码',
							width: '100px',
							align: 'center',
						},
						{
							key: 'parentCode',
							title: '上级菜单编码',
							width: '100px',
							align: 'center',
							template: function(item){
								return item.parentCode == null ? '':item.parentCode;
							}
						},
						{
							key: 'url',
							title: '菜单请求地址',
							width: '300px',
							align: 'center',
						},
						{
							key: 'sort',
							title: '排序',
							width: '100px',
							align: 'center',
						},
						{
							title: '是否启用',
							width: '100px',
							align: 'center',
							template: function(item){
								if (item.isUse){
									return '<input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF" checked>';
								}else {
									return '<input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">';
								}
							}
						},
						{
							title: '操作',
							align: 'center',
							width: '200px',
							template: function(item){
								return '<a lay-filter="edit">编辑</a> | <a lay-filter="del">删除</a>';
							}
						}
					]
				});
				// 监听自定义 编辑事件
				treeTable.on('tree(edit)',function(data){

					var index = layer.open({
						title: '编辑菜单',
						type: 2,
						shade: 0.2,
						maxmin:true,
						shadeClose: true,
						area: ['100%', '100%'],
						content: '/back/menu/edit?menuId='+data.item.id
					});
					$(window).on("resize", function () {
						layer.full(index);
					});
				});
				// 监听自定义 删除事件
				treeTable.on('tree(del)',function(data){
					layer.msg(JSON.stringify(data));
				});


				// 全部展开
				$('.open-all').click(function(){
					treeTable.openAll(re);
				})
				// 全部关闭
				$('.close-all').click(function(){
					treeTable.closeAll(re);
				});

			})
		</script>
	</body>
</html>
